<template>
  <div>
    <div class="top flex">
      <div>
        <span class="font-bold">收藏的专辑</span>
        ({{subAlbum.length}})
      </div>
      <div>
        <el-input
          placeholder="搜索收藏专辑"
          clearable
          suffix-icon="el-icon-search"
          v-model="key"
        ></el-input>
      </div>
    </div>
    <div class="main-list">
      <!-- 专辑 -->
      <album-list :list="subAlbum">
        <template #item2="{item}">
          {{ item.name }}
        </template>
        <template #item3="{item}">
          {{ item.artists | showArtist }}
        </template>
        <!-- 作用域插槽两种写法,带花括号的应该是解构赋值玩法 -->
        <template #item4="scope">
          {{ scope.item.size }}首
        </template>
      </album-list>
    </div>
  </div>
</template>

<script>
import albumList from '@/components/Album/albumList.vue'
import { getSubAlbum } from '@/api/album.js'
export default {
  data () {
    return {
      subAlbum: [],
      // 搜索框的值
      key: ''
    }
  },
  created () {
    this.showSubAlbum()
  },
  methods: {
    // 展示收藏MV
    async showSubAlbum () {
      const res = await getSubAlbum()
      if (res.data.code !== 200) return this.$message.error('获取专辑失败')
      this.subAlbum = res.data.data
      // console.log(res)
    }
  },
  components: {
    albumList
  }
}
</script>

<style lang="less" scoped>
.top {
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
}
</style>
